<template>
  <div class="_wz_cent_main _wz_rolesNav">
    <Form v-if="formOperation" ref="formAdd1" label-position="right" :label-width="90">
      <FormItem label="模块" prop="roleName">
        <i-select v-model="modules1" filterable placeholder="应用平台" :label-in-value="true" @on-change="powerFun" clearable>
          <Option v-for="item in modules" :value="item.id" :key="item.id">{{ item.moduleName }}</Option>
        </i-select>
      </FormItem>
    </Form>

    <div style="height: 100%;overflow: auto;">
      <Tabs :animated="false">
        <TabPane label="pc">
          <menuAllot v-if="formOperation" :tableData="tableDataPower" :selectData="selectData"></menuAllot>
        </TabPane>
        <TabPane label="app">
          <menuAllot v-if="formOperation" :tableData="tableDataPower1" :selectData="selectData"></menuAllot>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
import menuAllot from './menuAllot.vue';
import rolesAdd from './rolesAdd.vue';

export default {
  props: ['selectData'],
  components: {
    menuAllot,//列表
    rolesAdd,//添加
  },
  data () {
    return {
      formOperation: false,//表单左侧移出
      tableDataPower: [],//权限数据
      tableDataPower1: [],//权限数据
      modules: [],
      modules1: '',

    }
  },
  beforeCreate () {//beforeCreate创建前状态

  },
  created () {//created创建完毕状态
  },
  beforeMount () {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted () {//mounted 挂载结束状态
    var that = this


    //平台字典
    that.axios.post(that.apiUrl.systemMenuSystemModuleList,{}).then(res => {
      if (!!res) {
        that.modules = res.data.data
        that.modules1 = res.data.data[0].id


        that.powerFun();
      }
    }).catch(err => {
      console.log("失败", err)
    })
  },
  methods: {//执行的方法
    //功能模块
    powerFun () {
      var that = this;
      var formDataSearch = { roleId: that.selectData.roleId }
      formDataSearch.moduleId = that.modules1
      formDataSearch.clientType = 'pc'
      that.axios.post(that.apiUrl.systemMenuSystemMenuList, formDataSearch).then(res => {
        if (!!res) {
          let treeAttr = {
            id: 'id',
            parendId: 'parentId',
            name: 'name',
            rootId: 0
          }
          that.tableDataPower = that.public.toTreeData(res.data.data, treeAttr)//父子同级数据 处理成树形数据
          that.formOperation = true
        }
      }).catch(err => {
        console.log("失败", err)
      })
      var formDataSearch1 = { roleId: that.selectData.roleId }
      formDataSearch1.moduleId = that.modules1
      formDataSearch1.clientType = 'app'
      that.axios.post(that.apiUrl.systemMenuSystemMenuList, formDataSearch1).then(res => {
        if (!!res) {
          let treeAttr = {
            id: 'id',
            parendId: 'parentId',
            name: 'name',
            rootId: 0
          }
          that.tableDataPower1 = that.public.toTreeData(res.data.data, treeAttr)//父子同级数据 处理成树形数据
          that.formOperation = true
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },


  },
  watch: {//监听

  },
  beforeUpdate () {//beforeUpdate 更新前状态

  },
  updated () {//updated 更新完成状态

  },
  beforeDestroy () {//beforeDestroy 销毁前状态

  },
  destroyed () {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_rolesNav{
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
